<template>
  <ul class="contact-container">
    <li v-for="item in list" :key="item.id">
      <a :href="item.link" :target="item.link? '_blank' : ''">
        <div class="icon">
          <Icon :type="item.icon"/>
        </div>
        <span>{{item.text}}</span>
      </a>
      <div v-if="item.popup" class="popup">
        <img
            :src="item.popup"
            alt=""
        />
      </div>
    </li>
  </ul>
</template>

<script>

import Icon from "@/components/Icon/index.vue";

export default {
  name: 'Contact',
  components: {Icon},
  data() {
    return {
      list: [
        {
          id: 1,
          text: '清风的博客',
          link: 'https://gitee.com/cui-qingfeng/qingfengs-blog.git',
          icon: 'github',
          popup: ''
        },
        {
          id: 2,
          text: '2693468486@qq.com',
          link: 'mailto:2693468486@qq.com',
          icon: 'mail',
          popup: ''
        },
        {
          id: 3,
          text: '2693468486',
          link: 'tencent://message/?Menu=yes&uin=2693468486&Service=300&sigT=45a1e5847943b64c6ff3990f8a9e644d2b31356cb0b4ac6b24663a3c8dd0f8aa12a595b1714f9d45',
          icon: 'qq',
          popup: require('@/assets/contact/qq.png')
        },
        {
          id: 4,
          text: 'C15679273009',
          link: '',
          icon: 'weixin',
          popup: require('@/assets/contact/weixin.png')
        },
      ]
    }
  }
}
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
.contact-container{
  color: @gray;
  padding: 0 30px;
  @itemHeight: 30px;
  li{
    margin: 20px 0;
    position: relative;
    height: @itemHeight;
    line-height: @itemHeight;
    &:hover{
      .popup{
        transform: scaleY(1);
      }
    }
    a{
      display: flex;
      align-items: center;
      font-size: 14px;
      .icon{
        font-size: @itemHeight;
        margin-right: 10px;
      }
    }
    .popup{
      position: absolute;
      left: 0;
      bottom: @itemHeight + 8px;
      transform: scaleY(0);
      padding: 20px;
      background-color: #fff;
      border-radius: 6px;
      transition: all 0.3s;
      transform-origin: center bottom;
      &::after{
        content: '';
        width: 10px;
        height: 10px;
        position: absolute;
        left: 50%;
        bottom: -5px;
        transform: translateX(-50%) rotate(45deg);
        background-color: #fff;
      }
    }
  }
}
ul{
  list-style: none;
}
</style>